import TauTable from '@/components/TauTable';
import React, { useCallback, useEffect, useState } from 'react';
import { column } from '../stores/definitions';
import { useStore } from '@/hooks';
import { t } from '@lingui/macro';

export default function ABRouteTable({ priceTransfer, inForm = false }) {
  const [data, setData] = useState([]);
  const { ccPriceStore: store } = useStore();

  useEffect(() => {
    const { fromRoutes, toRoutes } = priceTransfer;
    const allIds = [...fromRoutes, ...toRoutes];
    (async () => {
      const res = await store.api.search({ search: { includeIds: allIds }, pg: { page: 0, size: 100000 } });
      setData(allIds.map((id) => {
        const row = res.find((r) => r.id === id);
        return {
          range: fromRoutes.indexOf(id) !== -1 ? t`A段` : t`B段`,
          ...row,
        };
      }));
    })();
  }, [priceTransfer, priceTransfer.fromRoutes, priceTransfer.toRoutes]);

  return (
    <div style={{ padding: inForm ? '' : '20px 0 20px 60px' }}>
      <TauTable
        size={inForm ? 'small' : 'medium'}
        hidePagination
        dataSource={data}
        primaryKey="id"
        cellProps={(rIdx, _, fName) => {
          if (fName === 'range') {
            if (rIdx === 0) return { rowSpan: priceTransfer.fromRoutes.length, style: { borderRight: '1px solid rgba(220, 222, 227, 0.4)' } };
            if (rIdx === priceTransfer.fromRoutes.length) return { rowSpan: priceTransfer.toRoutes.length, style: { borderRight: '1px solid rgba(220, 222, 227, 0.4)' } };
          }
        }}
        columns={[
          { title: '', dataIndex: 'range', width: 84, cell: (v) => <span style={{ fontWeight: 500 }}>{v}</span> },
          column('beginAreaName', {}),
          column('endAreaName', {}),
          column('cprice.oneTripPrice.RMB', { width: 180 }),
        ]}
      />
    </div>
  );
}
